<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>聚焦热点</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

 

<link rel="stylesheet" href="css/sm.css">
<link rel="stylesheet" href="css/sm-extend.css">
<link rel="stylesheet" href="css/app.css">
<script src="js/zepto.min.js"></script>
</head>
<body>
<div class="page-group" style="position:relative">
  <div id="page-infinite-scroll-bottom" class="page">
    <div class="content infinite-scroll" data-distance="100">
      <div class="list-block">
        <ul class="list-container">
          <li class="item-content">
            <div class="item-inner">
              <div class="item-jj"><a href="jjhd_info.html"><img src="upfiles/jjhd.jpg" alt=""/><span>讲座名称：上海中医药博物馆科技节活动系列之“闻香识药”</span><i>举办地点：上海中医药博物馆蔡伦路1200号<br>
时间：2016年5月15日上午10：00<br>
参与方式：提前预约（团队）</i></a></div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-jj"><a href="jjhd_info.html"><img src="upfiles/jjhd.jpg" alt=""/><span>讲座名称：上海中医药博物馆科技节活动系列之“闻香识药”</span><i>举办地点：上海中医药博物馆蔡伦路1200号<br>
时间：2016年5月15日上午10：00<br>
参与方式：提前预约（团队）</i></a></div>
            </div>
          </li>
        <li class="item-content">
            <div class="item-inner">
              <div class="item-jj"><a href="jjhd_info.html"><img src="upfiles/jjhd.jpg" alt=""/><span>讲座名称：上海中医药博物馆科技节活动系列之“闻香识药”</span><i>举办地点：上海中医药博物馆蔡伦路1200号<br>
时间：2016年5月15日上午10：00<br>
参与方式：提前预约（团队）</i></a></div>
            </div>
          </li>
          
        </ul>
      </div>
      <!-- 加载提示符 -->
      <div class="infinite-scroll-preloader">
        <div class="preloader"> </div>
      </div>
    </div>
  </div>


<div class="classna">
<div class="row no-gutter">
        <div class="col-25 classbt classbt1">类型<span class="icon icon-down"></span><i class="sline"></i></div>
        <div class="col-25 classbt classbt1">区域<span class="icon icon-down"></span><i class="sline"></i></div>
        <div class="col-25 classbt classbt1">状态<span class="icon icon-down"></span><i class="sline"></i></div>
        <div class="col-25 classbt classbt1">门票<span class="icon icon-down"></span></div>
      </div></div>
<!--蒙板-->     
<div class="mask"></div> 
<div class="classconbox">
<div class="classcon">
      <div class="classcon1"><span class="on" data-type="0">全部</span><span data-type="1">亲子</span><span data-type="2">实践/动手</span><span data-type="3">讲座</span><span data-type="4">科技</span><span data-type="5">自然</span><span data-type="6">动物</span><span data-type="7">生活</span></div>
      <div class="classconbbom"><p><a href="javascrip:;" class="cz1">重置</a><a href="javascrip:;" class="on sub1">提交</a></p><div class="cle h40"></div></div>
</div> 
<div class="classcon">
     <div class="classcon2">
     <span class="on" data-area="0">全部</span><span data-area="1">卢湾区</span><span data-area="2">黄浦区</span><span data-area="3">静安区</span><span data-area="4">培训</span><span data-area="5">徐汇区</span><span data-area="6">虹口区</span><span data-area="7">长宁区</span><span data-area="8">闸北区</span><span data-area="9">杨浦区</span><span data-area="10">浦东新区</span><span data-area="11">宝山区</span><span data-area="12">嘉定区</span><span data-area="13">松江区</span><span data-area="14">青浦区</span><span data-area="15">南汇区</span><span data-area="16">奉贤区</span><span data-area="17">金山区</span><span data-area="18">崇明县</span>
     </div>
     <div class="classconbbom"><p><a href="javascrip:;" class="cz2">重置</a><a href="javascrip:;" class="on sub2">提交</a></p><div class="cle h40"></div></div>
</div>
<div class="classcon">
  <div class="classcon3">
     <span class=" on" data-state="0">不限</span><span data-state="1">已结束</span><span data-state="2">未结束</span>
    <p> <a class="list_3a_data sel" href="javascript:;"  data-data="2016-4-11 00:00:00">5月14日</a><a class="list_3a_data sel" href="javascript:;"  data-data="2016-4-12 00:00:00">5月15日</a><a class="list_3a_data sel" href="javascript:;"  data-data="2016-5-16 00:00:00">5月16日</a><a class="list_3a_data sel" href="javascript:;"  data-data="2016-5-17 00:00:00">5月17日</a><a class="list_3a_data sel" href="javascript:;"  data-data="2016-5-18 00:00:00">5月18日</a><a class="list_3a_data sel" href="javascript:;"  data-data="2016-5-19 00:00:00">5月19日</a><a class="list_3a_data sel" href="javascript:;"  data-data="2016-5-20 00:00:00">5月20日</a><a class="list_3a_data sel" href="javascript:;"  data-data="2016-5-21 00:00:00">5月21日</a>
     </p></div>
     <div class="classconbbom"><p><a href="javascrip:;" class="cz3">重置</a><a href="javascrip:;" class="on sub3">提交</a></p><div class="cle h40"></div></div>
</div>
<div class="classcon">
  <div class="classcon4">
     <span class="on" data-ticket="0">全部</span><span data-ticket="1">免费</span><span data-ticket="2">优惠</span><span data-ticket="3">全价</span>
     </div>
     <div class="classconbbom"><p><a href="javascrip:;" class="cz4">重置</a><a href="javascrip:;" class="on sub4">提交</a></p><div class="cle h40"></div></div>
</div> 
</div> 
</div>    
<script type='text/javascript' src='js/sm.min.js' charset='utf-8'></script> 
<script type='text/javascript' src='js/sm-extend.min.js' charset='utf-8'></script> 
<script type="text/javascript">
    $(function () {
	//选项
	 var $div_li =$("div.classbt");
	    $div_li.click(function(){
			$(this).addClass("classbt2");
				$(this).siblings().removeClass("classbt2");
			
			$(this).find("span").addClass("icon-up");
			 $(this).find("span").removeClass("icon-down");
			$(this).siblings().find("span").addClass("icon-down");
			$(this).siblings().find("span").removeClass("icon-up");
			 $(".mask").show();
			$(".classconbox").show();
			 
           var index =  $div_li.index(this);  
			$("div.classcon")   	 
					.eq(index).show()    
					.siblings().hide();  
		}) 
		
	//类型
		var $sp1 =$("div.classcon1 span");
		var sub1=0;
		 $sp1.click(function(){
			$(this).addClass("on")          
				   .siblings().removeClass("on");
		           sub1=$(this).attr("data-type");
				   })  
		$(".cz1").click(function(){
			$sp1.eq(0).addClass("on")          
				   .siblings().removeClass("on");
			})
		$(".sub1").click(function(){
			$(".mask").hide();
			$(".classconbox").hide();
			$(".classbt").addClass("classbt2");
			$(".classbt").siblings().removeClass("classbt2");
            $(".classbt").find("span").addClass("icon-down");
			$(".classbt").find("span").removeClass("icon-up");
			alert(sub1);
			})
	//区域
		var $sp2 =$("div.classcon2 span");
		var sub2=0;
		 $sp2.click(function(){
			$(this).addClass("on")          
				   .siblings().removeClass("on");
		           sub2=$(this).attr("data-area");
				   })  
		$(".cz2").click(function(){
			$sp2.eq(0).addClass("on")          
				   .siblings().removeClass("on");
			})
		$(".sub2").click(function(){
			$(".mask").hide();
			$(".classconbox").hide();
			$(".classbt").find("span").addClass("icon-down");
			$(".classbt").find("span").removeClass("icon-up");
			$(".classbt").addClass("classbt2");
			$(".classbt").siblings().removeClass("classbt2");
			alert(sub2);
			})
	//状态
	var $sp3 =$("div.classcon3 span");
		 $sp3.on('touchstart mousedown',function(e){
	e.preventDefault()
	$sp3.removeClass('on');
	$(this).addClass('on');
	  var date = new Date();
	  now = date.getFullYear() + "-";
	  now = now + (date.getMonth() + 1) + "-";  
	  now = now + date.getDate() + " ";
	  now = now + date.getHours() + ":";
	  now = now + date.getMinutes() + ":";
	  now = now + date.getSeconds() + "";
var mystate=$(this).attr("data-state");
$(".list_3a_data").css('display', 'inline-block') 
	$(".list_3a_data").each(function(){
		
		var cha = (Date.parse(now) - Date.parse($(this).attr("data-data"))) / 86400000 * 24;

 switch(mystate)
{
case '1':
   if (cha < 0) {$(this).hide(0)}
  break;
case '2':
  if (cha >= 0) {$(this).hide(0)}
  break;
default:

} 
  
  });
});	

      $(".cz3").click(function(){
			$sp3.eq(0).addClass("on")          
				   .siblings().removeClass("on");
				   $(".list_3a_data").addClass('sel');
			})
		$(".sub3").click(function(){
			$(".mask").hide();
			$(".classconbox").hide();
			$(".classbt").find("span").addClass("icon-down");
			$(".classbt").find("span").removeClass("icon-up");
			$(".classbt").addClass("classbt2");
			$(".classbt").siblings().removeClass("classbt2");
			
			//alert(sub2);
			var mydata=$("div.classcon3 p .sel");
			 mydata.each(function(){
	 console.warn( $(this).attr("data-data"));
  });
			
			})
//日期

   $(".list_3a_data").on('touchstart mousedown',function(e){
	e.preventDefault()
	  if($(this).hasClass("sel")){
      $(this).removeClass('sel');
	  console.warn("没有日期"+$(this).attr("data-data"));
      }else{
	  $(this).addClass('sel');
	  console.warn("加入日期"+$(this).attr("data-data"));
	  }
	
});
		//门票
		var $sp4 =$("div.classcon4 span");
		var sub4=0;
		 $sp4.click(function(){
			$(this).addClass("on")          
				   .siblings().removeClass("on");
		           sub4=$(this).attr("data-ticket");
				   })  
		$(".cz4").click(function(){
			$sp4.eq(0).addClass("on")          
				   .siblings().removeClass("on");
			})
		$(".sub4").click(function(){
			$(".mask").hide();
			$(".classconbox").hide();
			$(".classbt").find("span").addClass("icon-down");
			$(".classbt").find("span").removeClass("icon-up");
			$(".classbt").addClass("classbt2");
			$(".classbt").siblings().removeClass("classbt2");
			alert(sub4);
			})		
  //无限滚动
  $(document).on("pageInit", "#page-infinite-scroll-bottom", function(e, id, page) {
    var loading = false;
    // 每次加载添加多少条目
    var itemsPerLoad = 3;
    // 最多可加载的条目
    var maxItems = 6;
    var lastIndex = $('.list-container li').length;
    function addItems(number, lastIndex) {
      // 生成新条目的HTML
      var html = '';
      for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
        html += ' <li class="item-content"><div class="item-inner"><div class="item-jj"><a href="#"><img src="upfiles/jjhd1.jpg" alt=""/><span>讲座名称：上海中医药博物馆科技节活动系列之“闻香识药”</span><i>举办地点：上海中医药博物馆蔡伦路1200号<br>时间：2016年5月15日上午10：00<br>参与方式：提前预约（团队）</i></a></div></div> </li></li>';
      }
      // 添加新条目
      $('.infinite-scroll .list-container').append(html);
    }
    $(page).on('infinite', function() {
      // 如果正在加载，则退出
      if (loading) return;
      // 设置flag
      loading = true;
      // 模拟1s的加载过程
      setTimeout(function() {
        // 重置加载flag
        loading = false;
        if (lastIndex >= maxItems) {
          // 加载完毕，则注销无限加载事件，以防不必要的加载
          $.detachInfiniteScroll($('.infinite-scroll'));
          // 删除加载提示符
          $('.infinite-scroll-preloader').remove();
          return;
        }
        addItems(itemsPerLoad,lastIndex);
        // 更新最后加载的序号
        lastIndex = $('.list-container li').length;
        $.refreshScroller();
      }, 1000);
    });
  });

  
 
  $.init();
});

    </script>
</body>
</html>
